<template>
	<div id="index">
		<div v-for="(item,index) in areaTable" :key="index" id="area">
			<div id="header">
				<span id='word'>{{item.name}}</span>
				<button id="areaUpdate" @click="updateArea(item.areaId)">修改</button>
				<button id="areaDelete" @click="deleteArea(item.areaId,item.s_id)">删除</button>
			</div>
			<div id="table">
				<div v-for="(item1,index1) in tableData" :key="index1" v-if="item.areaId === item1.areaId">

					<span id="s1">一号桌</span>
					<span id="s2">(可容纳{{item1.cz_number}}人)</span>
					<span id="s3" @click="deleteTable(item1.cz_id)">删除</span>
					<span id="s4" @click="updateTable(item1.cz_id,item1.cz_zt,item.areaId)">修改</span>

				</div>
				<div @click="addTable(item.areaId)" style="line-height: 60px;font-size: 60px;">+</div>
			</div>
		</div>

		<span id="addArea" @click="addArea()">⊕&nbsp&nbsp新增区域</span>

		<div class="dialog" :style="{'display': dialog1Display}">
			<span class="success">删除请求</span>
			<span class="wait">确定删除该区域吗？</span>
			<span>删除后取区域内所有桌面也将删除。</span>
			<button @click="dialog11Confirm()" class="btn1">确认</button>
			<button @click="dialog1Confirm()" class="btn2">取消</button>
		</div>

		<div class="dialog2" :style="{'display': dialog2Display}">
			<span>楼层名修改为</span>
			<input type="text" v-model="areaName">
			<button @click="dialog22Confirm()" class="btn1">确认</button>
			<button @click="dialog2Confirm()" class="btn2">取消</button>
		</div>

		<div class="dialog3" :style="{'display': dialog3Display}">
			<span>删除请求</span>
			<span>确定删除该桌子吗？</span>
			<button @click="dialog33Confirm()" class="btn1">确认</button>
			<button @click="dialog3Confirm()" class="btn2">取消</button>
		</div>

		<div class="dialog4" :style="{'display': dialog4Display}">
			<span>可容纳人数修改为</span>
			<input type="text" v-model="updateTable_number">
			<button @click="dialog44Confirm()" class="btn1">确认</button>
			<button @click="dialog4Confirm()" class="btn2">取消</button>
		</div>

		<div class="dialog5" :style="{'display': dialog5Display}">
			<span>请输入</span>
			<span>餐桌名称</span>
			<input type="text" name="" id="">
			<span>可容纳人数为</span>
			<input type="text" v-model="Cz_number">
			<button @click="dialog55Confirm()" class="btn1">确认</button>
			<button @click="dialog5Confirm()" class="btn2">取消</button>
		</div>

		<div class="dialog6" :style="{'display': dialog6Display}">
			<span>请输入</span>
			<span>区域名称</span>
			<input type="text" v-model="addAreaName">
			<button @click="dialog66Confirm()" class="btn1">确认</button>
			<button @click="dialog6Confirm()" class="btn2">取消</button>
		</div>

	</div>
</template>
<script>
	export default {
		name: "index",
		data() {
			return {
				dialog1Display: 'none',
				dialog2Display: 'none',
				dialog3Display: 'none',
				dialog4Display: 'none',
				dialog5Display: 'none',
				dialog6Display: 'none',
				areaTable: "",
				tableData: "",
				deleteAreaId: "",
				deleteS_Id: "",
				tableNumber: "",
				addAreaId: "",
				updateAreaId: "",
				updateTable_id: "",
				updateTable_areaid: "",
				updateTable_zt: "",
				deleteTable_id: "",
				areaNumber: "",
			}
		},
		methods: {
			dialog1Confirm() {
				this.dialog1Display = 'none';
			},
			dialog2Confirm() {
				this.dialog2Display = 'none';
			},
			dialog3Confirm() {
				this.dialog3Display = 'none';
			},
			dialog4Confirm() {
				this.dialog4Display = 'none';
			},
			dialog5Confirm() {
				this.dialog5Display = 'none';
			},
			dialog6Confirm() {
				this.dialog6Display = 'none';
			},
			dialog11Confirm() {
				this.dialog1Display = 'none';

				let data = {
					areaId: this.deleteAreaId,
					S_id: this.deleteS_Id
				}
				console.log(data)
				this.$axios.get("deleteArea", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main"
				})
			},
			dialog22Confirm() {
				this.dialog2Display = 'none';
				let data = {
					areaId: this.updateAreaId,
					S_id: "s001",
					name: this.areaName,
				}
				console.log(data)
				this.$axios.post("updateArea", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main"
				})
			},
			dialog33Confirm() {
				this.dialog3Display = 'none';
				let data = {
					Cz_id: this.deleteTable_id,
					S_id: "s001",
				}
				console.log(data)
				this.$axios.get("deleteTable", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main"
				})

			},
			dialog44Confirm() {
				this.dialog4Display = 'none';
				let data = {
					Cz_id: this.updateTable_id,
					Cz_number: this.updateTable_number,
					Cz_zt: this.updateTable_zt,
					areaId: this.updateTable_areaid,
					S_id: "s001"
				}
				console.log(data)
				this.$axios.post("updateTable", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main",
				})
			},
			dialog55Confirm() {
				this.dialog5Display = 'none';
				let data = {
					Cz_id: 'c' + (this.tableNumber + 1),
					Cz_number: this.Cz_number,
					Cz_zt: "no",
					areaId: this.addAreaId,
					S_id: "s001"
				}
				console.log(data)
				this.$axios.post("insertTable", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main",
				})
			},
			dialog66Confirm() {
				this.dialog6Display = 'none';
				let data = {
					areaId: 'a00' + (this.areaNumber + 1),
					S_id: "s001",
					name: this.addAreaName
				}
				console.log(data)
				this.$axios.post("insertArea", data).then(res => {
					console.log(res)
				});
				wx.redirectTo({
					url: "/pages/tableManagement/main",
				})
			},
			deleteArea(areaId, s_id) {
				console.log(areaId)
				this.dialog1Display = 'auto';
				this.deleteAreaId = areaId;
				this.deleteS_Id = s_id;
			},
			updateArea(areaId) {
				this.dialog2Display = 'auto';
				this.updateAreaId = areaId;

			},
			deleteTable(Cz_id) {
				this.dialog3Display = 'auto';
				this.deleteTable_id = Cz_id;
			},
			updateTable(Cz_id, Cz_zt, areaid) {
				this.updateTable_id = Cz_id,
					this.updateTable_zt = Cz_zt,
					this.updateTable_areaid = areaid,
					this.dialog4Display = 'auto';
			},
			addTable(areaId) {
				this.dialog5Display = 'auto';
				this.addAreaId = areaId;
			},
			addArea() {
				this.dialog6Display = "auto";

			}
		},
		mounted() {
			console.log(this)
			let data = {
				S_id: "s001"
			}
			this.$axios.get("getAreaBySid", data).then(res => {
				this.areaTable = res.data
				this.areaNumber = res.data.length
				console.log(this.areaTable);
				console.log(res);
			});
			this.$axios.get("getTableBySid", data).then(res => {
				this.tableData = res.data
				this.tableNumber = this.tableData.length
				console.log(this.tableNumber);
				console.log(this.tableData);
				console.log(res);
			});

		}
	}
</script>
<style scoped>
	#index {
		width: 100%;
		height: max-content;
	}

	#header {
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		margin-left: 25px;
		margin-right: auto;
		width: auto;
		height: auto;
		margin-bottom: 10px;
		padding-bottom: 0.1rem;
		border-left: orange 3px solid;
		padding-left: 10px;
		padding-right: 15px;
	}

	#areaUpdate {
		float: right;
		border: 1px forestgreen solid;
		color: forestgreen;
		text-align: center;
		background-color: transparent;
		font-size: 0.23rem;
		height: 25px;
		margin-top: 5px;
		margin-right: 5px;
	}

	#areaDelete {
		float: right;
		text-decoration: underline;
		text-align: center;
		font-size: 0.23rem;
		height: 25px;
		margin-top: 5px;
		margin-right: 10px;
		margin-left: 10px;
	}

	#area {
		height: auto;
		width: 100%;
		margin-top: 10px;
	}

	#table {
		padding-left: 10px;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	#table div {
		margin-left: 15px;
		text-align: center;
		height: 90px;
		width: 100px;
		padding-bottom: 0px;
		background-color: gainsboro;
		padding-top: 10px;
		margin-bottom: 15px;
		border-radius: 0.3ch;
	}

	#addArea {
		padding-bottom: 20px;
		margin-left: 25px;
		margin-top: 10px;
		color: orange;
	}

	.btn1 {
		color: white;
		background-color: red;
		display: inline-block;
		width: 40%;
		margin-left: 10px;
		margin-top: 10px;
		text-align: center;
		font-size: 0.3rem;
	}

	.btn2 {
		position: relative;
		bottom: 45px;
		left: 180px;
		color: white;
		margin-left: 0px;
		background-color: gray;
		display: inline-block;
		margin-top: 10px;
		width: 40%;
		text-align: center;
		font-size: 0.3rem;
	}

	#s1 {
		display: block;
		font-weight: 1000;
	}

	#s2 {
		display: block;
		font-size: 14px;
		margin-top: 15px;
		border-bottom: 1px black solid;
	}

	#s3 {
		font-size: 12px;
		color: forestgreen;
		border-right: 1px black solid;
		padding-right: 10px;
	}

	#s4 {
		font-size: 12px;
		color: red;
		padding-left: 10px;
	}

	.dialog {
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		background: white;
		width: 86%;
		height: 30%;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog span {
		margin-left: auto;
		margin-right: auto;
	}

	.dialog .success {
		margin-top: 0.3rem;
		margin-bottom: 0.5rem;
		font-weight: bold;
		font-size: 0.4rem;
	}

	.dialog2 {
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		background: white;
		width: 86%;
		height: 25%;
		padding-top: 30px;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog2 input {
		margin-top: 10px;
		margin-bottom: 0.1rem;
		width: 4rem;
		height: 0.6rem;
		margin-left: 1.2rem;
		border: black 1px solid;
	}

	.dialog2 span {
		margin-left: auto;
		margin-right: auto;
	}

	.dialog3 {
		padding-top: 20px;
		margin-top: 10px;
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		background: white;
		width: 86%;
		height: 20%;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog3 span {
		margin-left: auto;
		margin-right: auto;
	}

	.dialog4 {
		padding-top: 20px;
		margin-top: 10px;
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		background: white;
		width: 86%;
		height: 25%;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog4 input {
		margin-top: 10px;
		margin-bottom: 0.1rem;
		width: 4rem;
		height: 0.6rem;
		margin-left: 1.2rem;
		border: black 1px solid;
	}

	.dialog4 span {
		margin-left: auto;
		margin-right: auto;
	}

	.dialog5 {
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		padding-top: 20px;
		background: white;
		width: 86%;
		height: 30%;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog5 input {
		margin-bottom: 0.1rem;
		width: 4rem;
		height: 0.6rem;
		margin-left: 1.2rem;
		border: black 1px solid;
	}

	.dialog5 span {
		margin-left: auto;
		margin-right: auto;
	}

	.dialog6 {
		box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		padding-top: 20px;
		background: white;
		width: 86%;
		height: 25%;
		position: fixed;
		z-index: 2;
		display: flex;
		flex-direction: column;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.dialog6 input {
		margin-bottom: 0.1rem;
		width: 4rem;
		height: 0.6rem;
		margin-left: 1.2rem;
		border: black 1px solid;
	}

	.dialog6 span {
		margin-left: auto;
		margin-right: auto;
	}
</style>
